<template>
  <div class="workbench">
    <div class="list-table mb15">
      <div class="area-header">
        <span class="area-header-title">{{ $t('OA流程') }}</span>
      </div>
      <div v-loading="oaLoading" class="oa-process">
        <template v-if="oaList.length > 0">
          <el-button
            v-for="(v, index) in oaList"
            :key="index"
            v-hasPermi="v.menuEdit"
            plain
            @click="openFLowForm('oa', v)"
          >
            <i><img v-if="v.logoInfo" :src="v.logoInfo"></i>
            <p>{{ v.menu && v.menu.menuName ? v.menu.menuName : '-' }}</p>
          </el-button>
        </template>
        <div v-else class="empty-svg">
          <svg-icon icon-class="empty" class-name="none-icon" />
          <p>{{ $t('暂无流程') }}</p>
        </div>
      </div>
    </div>
    <div class="list-table noPad workbench">
      <el-tabs v-model="activeName" class="workbenchTab" @tab-click="handleClick">
        <el-tab-pane label="项目流程" name="deal">
          <div class="mb15">
            <el-form ref="queryForm" :model="dealQueryParams" :inline="true">
              <!-- <el-form-item :label="$t('项目类型')" prop="dealType">
                <el-select v-model="dealQueryParams.dealType" size="small" :placeholder="$t('项目类型')" clearable @change="getDealBaseList">
                  <el-option
                    v-for="dict in dealTypeOptions"
                    :key="dict.dictValue"
                    :label="$t(dict.dictLabel)"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item> -->
              <el-form-item :label="$t('项目名称')" prop="dealId">
                <!--                <el-select v-model="dealQueryParams.dealId" size="small" :placeholder="$t('项目名称')" @change="getDealFlowData">-->
                <!--                  <el-option-->
                <!--                    v-for="dict in dealBaseList"-->
                <!--                    :key="dict.id"-->
                <!--                    :label="$t(dict.dealName)"-->
                <!--                    :value="dict.id"-->
                <!--                  />-->
                <!--                </el-select>-->
                <MainBodySelect
                  v-model="dealQueryParams.dealId"
                  parameters="deal"
                  :select-bus-type="dealQueryParams.dealType"
                  @change="getDealFlowData"
                />
              </el-form-item>
            </el-form>
            <div v-loading="dealLoading">
              <div v-if="dealNodeList.length > 0" class="steps-box">
                <div class="area-header">
                  <span class="area-header-title">{{ $t('业务阶段') }}</span>
                </div>
                <ul>
                  <li
                    v-for="node in dealNodeList"
                    :key="node.id"
                    :class="node.class !== undefined ? node.class : ''"
                    @click="getChildrenNode(node.nodeId, 'deal', node.busId)"
                  >
                    <div class="phaseStyle">
                      <span :class="{bold:dealCurrentNodeId === node.nodeId}"> {{ $t(node.wfConfigNode.nodeName) }}</span>
                    </div>
                  </li>
                </ul>
                <div v-if="dealChildrenNodeList.length > 0" class="dealChildrenNodeList">
                  <span v-for="v in dealChildrenNodeList" :key="v.id" class="node-level2" @click="openChildFlowPage(v)">
                    <i />
                    <p>{{ v.wfConfigNode && v.wfConfigNode.nodeName ? v.wfConfigNode.nodeName : '-' }}</p>
                  </span>
                </div>
                <div v-if="dealOtherNodeList && dealOtherNodeList.length > 0">
                  <div class="area-header">
                    <span class="area-header-title">{{ $t('其他流程') }}</span>
                  </div>
                  <div class="dealChildrenNodeList">
                    <span v-for="v in dealOtherNodeList" :key="v.id" class="node-level2" @click="openFLowForm('dealId', v)">
                      <i v-if="v.logoInfo" class="logoInfo"><img :src="v.logoInfo"></i>
                      <i v-else />
                      <p>{{ v.menu && v.menu.menuName ? v.menu.menuName : '-' }}</p>
                    </span>
                  </div>
                </div>
              </div>
              <div v-else class="empty-svg">
                <svg-icon icon-class="empty" class-name="none-icon" />
                <p>{{ $t('请选择项目名称') }}</p>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="基金流程" name="fund">
          <div class="list-table">
            <el-form ref="queryForm" :model="fundQueryParams" :inline="true">
              <!-- <el-form-item :label="$t('基金类型')" prop="fundStatus">
                <el-select v-model="fundQueryParams.fundStatus" size="small" :placeholder="$t('基金类型')" clearable @change="getFundBaseList">
                  <el-option
                    v-for="dict in fundStatusOptions"
                    :key="dict.dictValue"
                    :label="$t(dict.dictLabel)"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item> -->
              <el-form-item :label="$t('基金名称')" prop="fundId">
                <el-select v-model="fundQueryParams.fundId" size="small" :placeholder="$t('基金名称')" @change="getFundFlowData">
                  <el-option
                    v-for="dict in fundBaseList"
                    :key="dict.id"
                    :label="$t(dict.fundName)"
                    :value="dict.id"
                  />
                </el-select>
              </el-form-item>
            </el-form>
            <div v-loading="fundLoading">
              <div v-if="fundNodeList.length > 0" class="steps-box">
                <div class="area-header">
                  <span class="area-header-title">{{ $t('业务阶段') }}</span>
                </div>
                <ul>
                  <li
                    v-for="node in fundNodeList"
                    :key="node.id"
                    :class="node.class !== undefined ? node.class : ''"
                    @click="getChildrenNode(node.nodeId, 'fund', node.busId)"
                  >
                    <div class="phaseStyle">
                      <span :class="{bold:fundCurrentNodeId === node.nodeId}"> {{ $t(node.wfConfigNode.nodeName) }}</span>
                    </div>
                  </li>
                </ul>
                <div v-if="fundChildrenNodeList.length > 0" class="fundChildrenNodeList">
                  <span v-for="v in fundChildrenNodeList" :key="v.id" class="node-level2" @click="openChildFlowPage(v)">
                    <i />
                    <p>{{ v.wfConfigNode && v.wfConfigNode.nodeName ? v.wfConfigNode.nodeName : '-' }}</p>
                  </span>
                </div>
                <div v-if="fundOtherNodeList && fundOtherNodeList.length > 0">
                  <div class="area-header">
                    <span class="area-header-title">{{ $t('其他流程') }}</span>
                  </div>
                  <div class="fundChildrenNodeList">
                    <span v-for="v in fundOtherNodeList" :key="v.id" class="node-level2" @click="openFLowForm('fund', v)">
                      <i v-if="v.logoInfo" class="logoInfo"><img :src="v.logoInfo"></i>
                      <i v-else />
                      <p>{{ v.menu.menuName }}</p>
                    </span>
                  </div>
                </div>
              </div>
              <div v-else class="empty-svg">
                <svg-icon icon-class="empty" class-name="none-icon" />
                <p>{{ $t('请选择基金名称') }}</p>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 添加或修改流程工作台对话框 -->
    <el-dialog :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <div class="dynaArea">
        <component :is="dynaPath" ref="viewFormPath" />
      </div>
    </el-dialog>
    <!-- 添加或修改流程工作台对话框 -->
    <el-dialog :title="$t(title)" :visible.sync="processOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <ProcessWordBenchForm v-if="processOpen" ref="processWordBenchForm" :bus-name="busName" />
    </el-dialog>
  </div>
</template>

<script>
import merge from 'webpack-merge'
import {
  getParentNode,
  getChildrenNode
} from '@/api/act/busFlow/wfBusNode'
import ProcessWordBenchForm from '@/views/act/workbenchConfig/processWorkBenchForm'
import { getAsyncComponent } from '@/utils'
import { findFundFof } from '@/api/fund/fundBase'
import { getWorkbenchList } from '@/api/act/process/wfMenuProcess'
import MainBodySelect from '@/components/MainBodySelect/index.vue'
export default {
  components: { MainBodySelect, ProcessWordBenchForm },

  data() {
			return {
				dealLoading: false,
        oaLoading: false,
				fundLoading: false,
        formOpen: false,
        processOpen: false,
        currentChildId: undefined,
        activeName: 'deal',
        busName: undefined,
        companyId: undefined,
        dealType: undefined,
        historyApproval: [],
        title: '',
				dealQueryParams: {
          dealType: undefined,
          dealId: undefined
        },
				fundQueryParams: {
          fundStatus: undefined,
          fundId: undefined
        },
        // 项目类型字典
        dealTypeOptions: [],
        // 基金类型字典
        fundStatusOptions: [],
				dealNodeList: [],
				fundNodeList: [],
				dealChildrenNodeList: [],
				fundChildrenNodeList: [],
				dealCurrentNodeId: '',
				fundCurrentNodeId: '',
				dealCurrentNode: {},
				dealOtherNodeList: [],
				fundOtherNodeList: [],
				lastNode: false,
				oaList: [],
        dealBaseList: [], // 项目列表
        fundBaseList: [], // 基金列表
        // 当前二级节点
        currentChildNode: {
          viewNode: true
        },
        busType: 'deal',
				busId: '7b7f219c2ba3416d9b157f74bdb8ac36',
        actFormPath: '',
        dynaPath: ''
			}
    },
  created() {
    // 项目类型
    this.getDicts('deal_type').then(response => {
      this.dealTypeOptions = response.data
    })
    // 基金类型
    this.getDicts('fund_status').then(response => {
      this.fundStatusOptions = response.data
    })
    // 获取项目列表
    this.getDealBaseList()
    // 获取OA流程
    this.getOaWorkBenchConfig()
  },
  methods: {
      // 切换项目、基金tabs页签
      handleClick(tab, event) {
        if (this.activeName === 'deal') {
          this.dealQueryParams.dealType = undefined
          this.dealQueryParams.dealId = undefined
          // this.getDealBaseList()
          this.dealNodeList = []
          this.dealChildrenNodeList = []
          this.dealOtherNodeList = []
        } else {
          this.fundQueryParams.fundStatus = undefined
          this.fundQueryParams.fundId = undefined
          // 获取基金列表
          this.getFundBaseList()
          this.fundNodeList = []
          this.fundChildrenNodeList = []
          this.fundOtherNodeList = []
        }
        console.log(tab, event, this.activeName)
      },
      // 获取OA流程的工作铺配置
      getOaWorkBenchConfig() {
        this.oaLoading = true
        const param = {
          functionType: 'oa',
          whetherReleaseWorkbench: 'Y'
        }
        getWorkbenchList(param).then(response => {
          this.oaList = response.rows
          this.oaLoading = false
        }).catch(() => {
          this.oaLoading = false
        })
      },
      // 打开流程表单
      openFLowForm(type, data) {
          this.formOpen = true
          this.title = data.menu.menuName
          var path = ''
          const initData = {}
        // 自定义表单
          if (data.formType === 'defined') {
            initData.id = null
            // 表单配置主id
            initData.formId = data.formId
            path = '@/views/system/desform/release/onlineForm'
          } else if (data.formType === 'dev') {
            // 开发表单
            path = data.actFormPath
          }
        this.dynaPath = getAsyncComponent(path)
        this.$bus.$once('async_done', () => {
            this.$nextTick(() => {
              this.$refs.viewFormPath && this.$refs.viewFormPath.init(initData)
            })
          })
      },
      // 根据项目类型获取项目列表
      getDealBaseList() {
        this.dealQueryParams.dealId = ''
        this.dealNodeList = []
        this.dealChildrenNodeList = []
        this.dealCurrentNodeId = ''
        this.dealCurrentNode = {}
        this.dealOtherNodeList = []
        // this.dealBaseList = []
        // const param = {
        //   dealType: dealType
        // }
        // listDataSelect(param).then(response => {
        //   this.dealBaseList = response.rows
        //   this.loading = false
        // }).catch(() => {
        //   this.loading = false
        // })
      },
      // 获取项目业务流程
      getDealFlowData(id, name, object) {
        console.log(id, name, object)
        // 获取项目名称
        this.busName = object.dealName
        this.companyId = object.companyId
        this.dealType = object.dealType
        const stateObj = {
          id: this.dealQueryParams.dealId,
          companyId: this.companyId,
          dealType: this.dealType
        }
        this.$router.push({
          query: merge(this.$route.query, stateObj)
        })
        // 根据项目Id和项目类型，获取获取当前项目的一级节点
        this.getFirstParentNode('deal', this.dealQueryParams.dealId)
      },
      // 根据基金类型获取基金列表
      getFundBaseList(fundStatus) {
          this.fundNodeList = []
          this.fundChildrenNodeList = []
          this.fundCurrentNodeId = ''
          this.fundQueryParams.fundId = ''
          this.fundCurrentNode = {}
        this.fundOtherNodeList = []
        this.fundBaseList = []
        const param = {
          fundStatus: fundStatus,
          scope: true
        }
        findFundFof(param).then(response => {
          this.fundBaseList = response.data
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      // 根据基金获取数据
      getFundFlowData() {
        // 根据项目Id和项目类型，获取获取当前项目的一级节点
        this.getFirstParentNode('fund', this.fundQueryParams.fundId)
        // 获取项目名称
        this.fundBaseList.forEach(item => {
          if (this.fundQueryParams.fundId === item.id) {
            this.busName = item.fundName
          }
        })
        const stateObj = {
          id: this.fundQueryParams.fundId
        }
        this.$router.push({
          query: merge(this.$route.query, stateObj)
        })
      },
			getFirstParentNode(busType, busId, roundId) { // 一级点击点击事件
				if (busType === 'deal') {
					this.dealLoading = true
				} else {
					this.fundLoading = true
				}
				getParentNode(busType, busId, roundId).then(response => {
					if (busType === 'deal') {
						this.dealNodeList = response.data || []
						this.dealCurrentNode = response.datas.currentNode
						this.roundId = response.datas.roundId // 当前轮次ID
						this.getChildrenNode(this.dealCurrentNode.nodeId, busType, busId)
						for (let i = 0; i < this.dealNodeList.length; i++) {
							this.dealNodeList[i].class = 'active'
							if (this.dealNodeList[i].nodeId === this.dealCurrentNode.nodeId) {
								if (i === this.dealNodeList.length - 1) {
									this.lastNode = true
								}
								return
							}
						}
						this.dealLoading = false
					} else {
						this.fundNodeList = response.data || []
						this.fundCurrentNode = response.datas.currentNode
						this.roundId = response.datas.roundId // 当前轮次ID
						this.getChildrenNode(this.fundCurrentNode.nodeId, busType, busId)
						for (let i = 0; i < this.fundNodeList.length; i++) {
							this.fundNodeList[i].class = 'active'
							if (this.fundNodeList[i].nodeId === this.fundCurrentNode.nodeId) {
								if (i === this.fundNodeList.length - 1) {
									this.lastNode = true
								}
								return
							}
						}
						this.fundLoading = false
					}
				})
			},
			getChildrenNode(parentNodeId, key, busId) { // 一级点击点击事件 - 查询二级节点
				if (key === 'deal') {
          const param = {
            functionType: 'deal',
            whetherReleaseWorkbench: 'Y',
            dealType: this.$route.query.dealType
          }
          getWorkbenchList(param).then(response => {
            this.dealOtherNodeList = response.rows
          })
					this.dealLoading = true
					this.dealCurrentNodeId = parentNodeId
					this.busId = busId
				} else {
          const param = {
            functionType: 'fund',
            whetherReleaseWorkbench: 'Y'
          }
          getWorkbenchList(param).then(response => {
            this.fundOtherNodeList = response.rows
          })
					this.fundLoading = true
					this.fundCurrentNodeId = parentNodeId
					this.busId = busId
				}
				getChildrenNode(parentNodeId, this.busId, this.roundId).then(response => {
					if (key === 'deal') {
						this.dealChildrenNodeList = response.data || []
						this.dealLoading = false
					} else {
						this.fundChildrenNodeList = response.data || []
						this.fundLoading = false
					}
				})
			},
      // 点击项目子节点，打开弹窗
      openChildFlowPage(childNode) {
        console.log('子节点', childNode)
        this.title = this.busName + '-' + childNode.wfConfigNode.nodeName
        this.processOpen = true
        this.$nextTick(() => {
          this.$refs.processWordBenchForm.childrenNodeClick(childNode.id)
        })
        // this.childrenNodeClick(childNode.id)
      }
    }
}
</script>
<style lang="scss" scoped>
.workbench{
  height: calc(100vh - 185px);
  overflow: auto;
  margin-right: -15px;
  padding-right: 15px;
}
.empty-svg{
	text-align: center;
  margin: 5% 0;
	.svg-icon{
		font-size: 150px;
	}
	p{
		margin: 0;
		font-size: 14px;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #c2c2c2;
	}
}
.oa-process{
  min-height: 77px;
  /deep/ button{
    padding: 0px;
    border: 0;
    margin: 8px;
    span{
      background: #F6F6FF;
      box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1);
      border-radius: 6px;
      color: #454647;
      padding: 8px 20px;
      display: inline-flex;
      align-items: center;
      column-gap: 12px;
      width: 180px;
      cursor: pointer;
      i{
        width: 45px;
        min-width: 45px;
        height: 45px;
        border-radius: 50%;
        display: inline-block;
        background: #fff;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
      p{
        margin: 0;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
.el-form-item {
	margin-bottom: 0px;
}
h2{
	font-size: 16px;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 20px;
	margin: 0;
	margin: 15px 0;
}

.node-level2{
	margin: 15px 15px 0 10px;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	i{
		width: 45px;
		min-width: 45px;
		height: 45px;
		margin: 0 auto;
		display: block;
		background: url();
    background-repeat: no-repeat;
    background-size: contain;
	}
  .logoInfo{
    background: transparent;
    img{
      height: 100%;
      width: 100%;
    }
  }
	p{
		margin: 0;
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 10px;
		color: #454647;
		font-weight: 400;
    font-size: 14px;
	}
}
.dynaArea>div{
  height: 100%;
}
.workbench{
  /deep/.el-form--inline .el-form-item__content .el-input{
    width: 200px!important;
  }
}
</style>
